<template>
  <a-card :bordered="false" class="card-area">
    <a-row type="flex">
      <detail-list style="width: 100%" :col="2">
        <detail-list-item term="学号">{{ info.xh }}&nbsp;</detail-list-item>
        <detail-list-item term="姓名">{{ info.xm }}&nbsp;</detail-list-item>
        <detail-list-item term="性别">{{ info.xbmc }}&nbsp;</detail-list-item>
        <detail-list-item term="院系">{{ info.ssyxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="专业">{{ info.sszymc }}&nbsp;</detail-list-item>
        <detail-list-item term="方向">{{ info.yjfxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="学制">{{ info.xz }}&nbsp;</detail-list-item>
        <detail-list-item term="导师姓名">{{ info.dsxm }}&nbsp;</detail-list-item>
        <detail-list-item term="个人电话">{{ info.lxdh }}&nbsp;</detail-list-item>
        <detail-list-item term="拟实践类别">{{ info.nsjlbmc === '其他' ? info.nsjlbqt : info.nsjlbmc }}&nbsp;</detail-list-item>
        <detail-list-item term="实践基地名称">{{ info.sjjdmc }}&nbsp;</detail-list-item>
        <detail-list-item term="实践单位全称">{{ info.sjdwqc }}&nbsp;</detail-list-item>
        <detail-list-item term="实践单位详细地址">{{ info.sjdwxxdz }}&nbsp;</detail-list-item>
        <!-- <detail-list-item term="专业实践起止时间">{{ info.zysjkssj  }} - {{ info.zysjjssj  }}&nbsp;</detail-list-item> -->
        <detail-list-item term="专业实践起止时间">{{ info.zysjkssj && info.zysjkssj.format('YYYY-MM-DD') }} - {{ info.zysjjssj && info.zysjjssj.format('YYYY-MM-DD') }}&nbsp;</detail-list-item>
        <detail-list-item term="实践单位指导教师姓名">{{ info.sjzdjsxm }}&nbsp;</detail-list-item>
        <detail-list-item term="专业技术职称">{{ info.zyjszc }}&nbsp;</detail-list-item>
        <detail-list-item term="实践单位指导教师联系电话">{{ info.sjdwzdjslxdh }}&nbsp;</detail-list-item>
        <!-- <detail-list-item term="拟实践内容">{{ info.nsjnr }}&nbsp;</detail-list-item>
        <detail-list-item term="审核状态">{{ info.shztmc }}&nbsp;</detail-list-item> -->
      </detail-list>
    </a-row>
    <p style="color:rgba(0, 0, 0, 0.85);">拟实践内容:</p>
    <pre style="white-space: pre-wrap;
    word-wrap: break-word;">{{ info.nsjnr }}</pre>
    <p style="color:rgba(0, 0, 0, 0.85);">审核状态:</p>
    <p>{{ info.shzt == '07' ? "专业学位办已备案" : (info.shzt == '08' ? "专业学位办未备案" : info.shztmc) }}</p>
    <a-form v-if="+routerQuery.isCheck" :form="form" layout="vertical">
      <!-- <a-form-item v-if="isYxRole" label="成绩评定" style="margin-bottom: 0">
        <a-select
          allowClear
          style="width: 200px;"
          v-decorator="['shcj',
          {
            rules: [{ required: true }],
          }]"
        >
          <a-select-option v-for="i in TYPE0517" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item v-if="!isYxRole" label="专业学位办备案" style="margin-bottom: 0">
        <a-select
          allowClear
          style="width: 200px;"
          v-decorator="['shjg',
          {
            rules: [{ required: true , message: '请选择审核结果'}],
          }]"
        >
          <a-select-option value="07">专业学位办已备案</a-select-option>
          <a-select-option value="08">专业学位办未备案</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <!-- <a-form :form="form" layout="vertical">
      <a-row :gutter="48">
        <a-col style="height: 93px" :md="12" :sm="24">
          <a-form-item label="实践类别" style="margin-bottom: 0">
            <a-form-item :style="{ display: 'inline-block', width: '50%' }">
              <a-select
                allowClear
                v-decorator="['nsjlbm',
                {
                  rules: [{ required: true }],
                }]"
                @change="nsjlbmChange"
              >
                <a-select-option v-for="i in TYPE0515" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :style="{ display: 'inline-block', width: '50%' }">
              <a-input
                :disabled="!nsjlbqtRequire"
                v-decorator="['nsjlbqt',
              {
                rules: [{ required: nsjlbqtRequire }],
              }]"
                placeholder="当选择其他时需要输入"
              />
            </a-form-item>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="实践基地名称" style="margin-bottom: 0">
            <a-form-item :style="{ display: 'inline-block', width: '50%' }">
              <a-select
                allowClear
                v-decorator="['sjjdmc',
              {
                rules: [{ required: true }],
              }]"
                showSearch
                :filterOption="filterOption"
                @change="sjjdmcChange"
              >
                <a-select-option
                  v-for="(i, index) in unionBaseList"
                  :key="index"
                  :value="i.lhpyjdmc"
                >{{ i.lhpyjdmc }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :style="{ display: 'inline-block', width: '50%' }">
              <a-input
                :disabled="!sjjdmc2Require"
                v-decorator="['sjjdmc2',
              {
                rules: [{ required: sjjdmc2Require }],
              }]"
                placeholder="当选择其他时需要输入"
              />
            </a-form-item>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="实践单位全称">
            <a-input
              v-decorator="['sjdwqc',
              {
                rules: [{ required: true }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="实践单位详细地址">
            <a-input
              style="width: 100%"
              v-decorator="['sjdwxxdz',
              {
                rules: [{ required: true }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="专业实践起止时间">
            <a-range-picker
              style="width: 100%"
              v-decorator="[
              'zysjqzsj',
              {
                rules: [{ required: true, message: '请选择起止时间!' }],
              }
            ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="实践指导教师姓名">
            <a-input
              v-decorator="['sjzdjsxm',
              {
                rules: [{ required: true }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="专业技术职称">
            <a-input
              v-decorator="['zyjszc',
              {
                rules: [{ required: true }],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="实践单位指导教师联系电话">
            <a-input
              v-decorator="['sjdwzdjslxdh',
              {
                rules: [{ required: true }],
              }]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :md="12" :sm="24">
        <a-form-item label="拟实践内容">
          <a-input
            type="textarea"
            placeholder="请输入拟实践内容，限定200字"
            v-decorator="[
                  'nsjnr',
                  {
                    rules: [{ required: true }],
                  }
                ]"
            maxlength="200"
            :autosize="{ minRows: 6, maxRows: 10 }"
          />
        </a-form-item>
      </a-row> -->
      <div class="ant-pro-footer-toolbar">
        <a-button style="float: right;margin: 10px 0 0 10px;" @click="$router.back()">返回</a-button>
        <!-- <a-button v-if="+routerQuery.isCheck" type="danger" style="float: right;margin: 10px 0 0 10px;" @click="checkBakc">退回</a-button> -->
        <template v-if="isYxRole">
          <a-button v-if="+routerQuery.isCheck" type="primary" style="float: right;margin: 10px 0 0 10px;" @click="check(0)">不通过</a-button>
          <a-button v-if="+routerQuery.isCheck" type="primary" style="float: right;margin: 10px 0 0 10px;" @click="check(1)">通过</a-button>
        </template>
        <template v-else>
            <a-button v-if="+routerQuery.isCheck" type="primary" style="float: right;margin: 10px 0 0 10px;" @click="sucCheck()">完成备案</a-button>
        </template>
      </div>
    <!-- </a-form> -->
  </a-card>
</template>

<script>
import DetailList from "~/tool/DetailList";
const DetailListItem = DetailList.Item;
import { mapState } from "vuex";

export default {
  components: { DetailList, DetailListItem },
  computed: {
    ...mapState({
      TYPE0515: state => state.app["TYPE0515"]
    }),
    routerQuery() {
      return this.$route.query
    },
    isYxRole() {
      return +this.$route.query.isYxRole
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      unionBaseList: [],
      nsjlbqtRequire: false,
      sjjdmc2Require: false,
      info: {}
    };
  },
  created() {
    this.$store.dispatch("app/setDictionary", "TYPE0515");
    this.$api.base.unionBaseALl().then(res => {
      this.unionBaseList = res.data;
    });
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$api.degree.zysjsqInfo(this.routerQuery.id).then(res => {
        if (res.data) {
          // this.form.setFieldsValue({          ...res.data,
          //   zysjqzsj: [res.data.zysjkssj, res.data.zysjjssj]
          // })
          // this.nsjlbqtRequire = res.data.nsjlbm === '05'
          this.info = res.data
        }
      })
    },
    filterOption(value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    nsjlbmChange(e) {
      this.form.setFieldsValue({ nsjlbqt: '' })
      this.nsjlbqtRequire = e === '05'
    },
    sjjdmcChange(e) {
      this.form.setFieldsValue({ sjjdmc2: '' })
      this.sjjdmc2Require = e === '其他'
    },
    sucCheck(){
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        console.log(values)
        if(values.shjg == '07'){
          this.check(1)
        }else{
          this.check(0)
        }
      })
    },
    check(isPass) {
      let shjg = this.isYxRole ? (+isPass ? '05' : '06') : (+isPass ? '07' : '08')
      let apiFn = this.isYxRole ? 'zysjsqYxCheck' : 'zysjsqXwbCheck'
      this.$api.degree[apiFn]({
        id: this.routerQuery.id,
        shjg
      }).then(res => {
        // this.getInfo()
        this.$message.success(res.msg)
        this.$router.back()
      })
    },
    checkBakc() {
      this.$confirm({
        title: '确定退回该实践申请吗?',
        centered: true,
        onOk: () => {
          this.$api.degree.zysjsqBack({id: this.info.id}).then(res => {
            // this.getInfo()
            this.$message.success(res.msg)
            this.$router.back()
          })
        },
        onCancel: () => {}
      })
    },
    // addApply() {
    //   this.form.validateFields((err, values) => {
    //     if (err) {
    //       return
    //     }
    //     let params = { ...values }
    //     params.zysjkssj = params.zysjqzsj[0].format('YYYY-MM-DD')
    //     params.zysjjssj = params.zysjqzsj[1].format('YYYY-MM-DD')
    //     delete params.zysjqzsj
    //     if (params.sjjdmc === '其他') {
    //       params.sjjdmc = params.sjjdmc2
    //     }
    //     let apiFn = this.id ? 'applyzysjUpdate' : 'applyzysj'
    //     this.$api.student[apiFn]({ ...params, xh: this.user.xh, id: this.id }).then(res => {
    //       this.$message.success(res.msg)
    //     })
    //   })
    // }
  }
};
</script>

<style>
</style>
